<template>
  <div>
    <vue-form 
      ref="vueForm"
      :formItem="form_item"
      :fromHandler="form_handler"
      :formData="form_data"
    >
      <template v-slot:maintain>
          <el-row :gutter="30">
            <el-col :span="6">
              <el-date-picker v-model="form_data.maintainDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col :span="6">下次保养日期：2020-12-12</el-col>
          </el-row>
      </template>
      <template v-slot:energy>
          <el-radio-group v-model="form_data.energyType" @change="changeEnergyType">
            <el-radio v-for="item in energyType" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
          <div class="progress-bar-wrap" v-if="form_data.energyType == 3 || form_data.energyType == 1">
            <span class="label-text">电量：</span>
            <el-row>
              <el-col :span="10">
                <el-slider v-model="form_data.electric" show-input></el-slider>
              </el-col>
            </el-row>
          </div>
          <div class="progress-bar-wrap" v-if="form_data.energyType == 3 || form_data.energyType == 2">
            <span class="label-text">油量：</span>
            <el-row>
              <el-col :span="10">
                <el-slider v-model="form_data.oil" show-input></el-slider>
              </el-col>
            </el-row>
          </div>
      </template>
      <template v-slot:carsAttr>
        <cars-attr ref="carsAttr" :countKm.sync="form_data.countKm" :oil="form_data.oil" :initValue="form_data.carsAttr" :value.sync="form_data.carsAttr" />
      </template>
      <template v-slot:leaseList>
        <el-row :gutter="10">
          <el-col :span="4" v-for="item in leaseListData" :key="item.carsLeaseTypeId">
            <div>{{item.carsLeaseTypeName}}</div>
            <el-input-number controls-position="right" v-model="item.price" :min="0"/>
          </el-col>
        </el-row>
      </template>
    </vue-form>
  </div>
</template>

<script>
import VueForm from "@c/form";
import CarsAttr from "./component/carsAttr";
import { GetCarsBrand, GetParking } from "@/api/common";
import { CarsAdd, CarsDetailed, CarsEdit, CarsInfoAdd,CarsInfoDetailed,CarsInfoEdit } from "@/api/cars";
import { LeaseList } from "@/api/lease";

export default {
  name: "CarsAdd",
  components: {
    VueForm,
    CarsAttr
  },
  data() {
    return {
      id: this.$route.query.id,
      editor: null,
      energyType: this.$store.state.config.energyType,
      cars_attr: [],
      carsBrandList: [],
      form_data: {
        carsImg: "",
        parkingId: "",
        carsBrandId:"",
        carsMode: "",
        carsNumber: "",
        carsFrameNumber: "",
        engineNumber: "",
        carsImg: "",
        yearCheck: true,
        gear: 1,
        energyType: 2,
        electric: 100,
        oil: 100,
        carsAttr: "",
        content: "",
        maintainDate: "",
        status: true,
        countKm: ""
      },
      form_item: [
        {
          type:"Select",
          label:"车辆品牌",
          placeholder:"请选择车辆品牌",
          prop:"carsBrandId",
          options:[],
          select_value: "id",
          select_label: "nameCh",
          required: true
        },
        { 
          type: "Select", 
          label: "停车场", 
          placeholder: "请选择停车场",
          prop: "parkingId",
          options: [],
          required: true,
          select_value: "id",
          select_label: "parkingName",
        },
        { 
          type: "Input", 
          label: "车辆型号", 
          placeholder: "请输入车辆型号",
          prop: "carsMode",
          required: true
        },
        { 
          type: "Input", 
          label: "车牌号", 
          placeholder: "请输入车牌号",
          prop: "carsNumber",
          required: true
        },
        { 
          type: "Input", 
          label: "车架号", 
          placeholder: "请输入车架号",
          prop: "carsFrameNumber",
          required: true
        },
        { 
          type: "Upload", 
          label: "缩略图", 
          placeholder: "请上传缩略图",
          prop: "carsImg",
          // required: true
        },
        { 
          type: "Input", 
          label: "发动机号", 
          placeholder: "请输入发动机号",
          prop: "engineNumber",
          required: true
        },
        { 
          type: "Radio", 
          label: "年检", 
          placeholder: "请选择年检",
          prop: "yearCheck",
          options: this.$store.state.config.year_check
        },
        { 
          type: "Slot", 
          slotName: "maintain", 
          prop:"maintainDate", 
          label: "保养日期"
        },
        { 
          type: "Radio", 
          label: "档位", 
          placeholder: "请选择档位",
          prop: "gear",
          options: this.$store.state.config.gear
        },
        { 
          type: "Slot", 
          slotName: "energy", 
          prop:"energyType", 
          label: "能源类型"
        },
        {
          type:"Input",
          label: "可行驶公里数",
          prop: "countKm"
        },
        {type:"Disabled",label:"禁启用",prop:"status"},
        { 
          type: "Slot", 
          slotName: "carsAttr", 
          prop:"carsAttr", 
          label: "车辆属性"
        },
        { 
          type: "Slot", 
          slotName: "leaseList", 
          prop:"lease", 
          label: "租赁价格"
        },
        { 
          type: "editor", 
          prop:"content", 
          label: "车辆描述"
        },
      ],
      form_handler: [
        {label: "确定",key:"submit",type:"primary",handler:()=>this.onSubmit()},
        {label: "重置",key:"reset",type:"danger",handler:()=>this.reset()}
      ],
      leaseListData: []
    }
  },
  beforeMount() {
    this.getCarsBrand();
    this.getParking();
    this.getLeaseList();
    if(this.id) {
      this.getDetail();
    }
  }, 
  methods: {
    getLeaseList() {
      if(this.id) {return false};
      LeaseList().then((res) => {
        const data = res.data.data;
        if(data) {
          this.leaseListData = data;
        }
      })
    },
    getCarsBrand() {
      GetCarsBrand()
        .then((res) => {
          const data = res.data.data;
          if(data) {
            const carsBrand = this.form_item.filter(i => i.prop === "carsBrandId");
            if(carsBrand.length > 0) {
              carsBrand[0].options = data;
            }
          }
        })
    },
    getParking() {
      GetParking()
        .then((res) => {
          const data = res.data.data;
          if(data) {
            const parking = this.form_item.filter(i => i.prop === "parkingId");
            if(parking.length > 0) {
              parking[0].options = data;
            }
          }
        })
    },
    changeEnergyType(value) {
      this.form_data.oil = 0;
      this.form_data.electric = 0;
    },
    addCarsAttr() {
      this.cars_attr.push({attr_key:"",attr_value:""});
    },
    delCarsAttr(index) {
      this.cars_attr = this.cars_attr.filter((i,_index) => {
        return _index !== index;
      })
    },
    formatCarsAttr() {
      this.$refs.carsAttr.callbackValue();   
    },
    onSubmit() {
      this.formatCarsAttr();
      this.$refs.vueForm.$refs.form.validate((valid) => {
        if (valid) {
          this.id ? this.edit() : this.add()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    add() {
      CarsInfoAdd({...this.form_data,leasePrice:this.leaseListData})
      .then((res) => {
        this.$message({
          type: "success",
          message: `${res.message}`
        })
        this.reset();
      })
    },
    edit() {
      CarsInfoEdit({...this.form_data,id: this.id,leasePrice:this.leaseListData})
        .then((res) => {
          this.$message({
            type: "success",
            message: `${res.message}`
          })
          this.reset();
        })
    },
    getDetail() {
      CarsInfoDetailed({id:this.id})
        .then((res) => {
          const data = res.data;
          for(let key in data) {
            if(Object.keys(this.form_data).includes(key)) {
              this.form_data[key] = data[key];
            }
          }
          this.leaseListData = data.leasePrice;
        })
    },
    reset() {
      this.$refs.vueForm.$refs.form.resetFields();
      this.cars_attr = [];
      this.leaseListData = [];
      this.$refs.vueForm.$refs.editor[0].clearTxt();
    }
  }
}
</script>

<style lang="scss" scoped>

</style>